<!DOCTYPE html>
<div id="page-torrents" class="wrapper" ng-controller="torrentsController">
  <div ng-if="connectionLost" class="popup animated">
    <div class="content">
      <h2 class="ui center aligned icon header">
        <i class="plug icon"></i>
        Connection Lost!
      </h2>
    </div>
  </div>
  <div class="torrent sidebar">
    <ul class="nav">
      <li data-state="all" ng-click="filterByStatus('all')" ng-class="activeOn('all')">
        <i class="ui large teal asterisk icon"></i>
        All
        <div class="ui torrent sort label">{{numInFilter('all')}}</div>
      </li>
      <li data-state="downloading" ng-click="filterByStatus('downloading')" ng-class="activeOn('downloading')">
        <i class="ui large blue arrow down icon"></i>
        Downloading
        <div class="ui torrent sort label">{{numInFilter('downloading')}}</div>
      </li>
      <li data-state="finished" ng-click="filterByStatus('finished')" ng-class="activeOn('finished')">
        <i class="ui large green checkmark icon"></i>
        Finished
        <div class="ui torrent sort label">{{numInFilter('finished')}}</div>
      </li>
      <li data-state="seeding" ng-click="filterByStatus('seeding')" ng-class="activeOn('seeding')">
        <i class="ui large orange arrow up icon"></i>
        Seeding
        <div class="ui torrent sort label">{{numInFilter('seeding')}}</div>
      </li>
      <li data-state="stopped" ng-click="filterByStatus('stopped')" ng-class="activeOn('stopped')">
        <i class="ui large grey pause icon"></i>
        Stopped
        <div class="ui torrent sort label">{{numInFilter('stopped')}}</div>
      </li>
      <li data-state="error" ng-click="filterByStatus('error')" ng-class="activeOn('error')">
        <i class="ui large red remove icon"></i>
        Failed
        <div class="ui torrent sort label">{{numInFilter('error')}}</div>
      </li>
    </ul>
    <div id="torrent-sidebar-labels">
      <div class="section">
        <span>Labels</span>
        <a data-role="labels-clear" class="ui gray basic mini clear button" ng-click="filterByLabel()">Clear</a>
      </div>
      <ul class="filter label">
        <span ng-if="labels.length == 0" class="meta text">No labels...</span>
        <li data-label="{{label}}" ng-repeat="label in labels">
          <div class="ui fluid torrent tag label" ng-click="filterByLabel(label)" ng-class="{blue: activeLabel(label)}">
            {{label}}
          </div>
        </li>
      </ul>
    </div>
    <div id="torrent-sidebar-trackers" ng-if="$btclient.enableTrackerFilter">
      <div class="section">
        <span>Trackers</span>
        <a data-role="trackers-clear" class="ui gray basic mini clear button" ng-click="filterByTracker()">Clear</a>
      </div>
      <ul class="filter label">
        <span ng-if="trackers.length == 0" class="meta text">No trackers...</span>
        <li ng-repeat="tracker in trackers">
          <div
            class="ui fluid torrent tag label"
            ng-click="filterByTracker(tracker)"
            ng-class="{blue: activeTracker(tracker)}"
          >
            {{tracker}}
          </div>
        </li>
      </ul>
    </div>
  </div>

  <div class="main-panel">
    <div class="action header">
      <div class="actions left">
        <div
          id="torrent-action-header"
          action-header
          actions="$btclient.actionHeader"
          labels="labels"
          enabled="noneSelected()"
          click="doAction"
        ></div>
      </div>
      <div class="actions right">
        <div class="ui fluid search" ng-class="{loading: isSearching}">
          <div class="ui icon input">
            <input
              search
              class="prompt"
              type="text"
              placeholder="Search torrents..."
              ng-model="filters.search"
              ng-change="filterBySearch()"
              ng-model-options="filters.options"
            />
            <i class="search icon"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="main-content" limit-bind="torrentLimit">
      <div ng-if="showDragAndDrop" class="popup animated">
        <div class="content">
          <h2 class="ui center aligned icon header">
            <i class="add circle icon"></i>
            Upload Torrent Files
            <div class="sub header" ng-if="!settings.alwaysPromptUploadOptions && $btclient.uploadOptionsEnable">
              Hold down <div class="ui label">{{ uploadAdvancedOptionsKey }}</div> key for advanced options
            </div>
          </h2>
        </div>
      </div>
      <div infinite-scroll-parent="true" infinite-scroll="showMore()" infinite-scroll-distance="0.5">
        <table
          id="torrentTable"
          ng-class="{ 'compact': settings.ui.displayCompact, 'is-sticky': settings.ui.fixedHeader }"
          rz-table
          rz-busy="guiBusy"
          rz-profile="$server.id"
          rz-mode="settings.ui.resizeMode"
          rz-container=".main-content"
          columns="$server.columns"
          class="ui single line unstackable selectable fixed torrent resize table"
        >
          <thead>
          <tr sorting="changeSorting" mode="$server.id">
            <th
                    ng-repeat="col in $server.columns | filter:{enabled: true} track by col.name"
                    rz-col="col.attribute"
                    sort="col.attribute"
            >
              {{::col.name}}
            </th>
          </tr>
          </thead>
          <tbody class="zoom" ng-class="settings.ui.displaySize" torrent-body columns="$server.columns">
            <tr
              ng-repeat="torrent in arrayTorrents | limitTo:torrentLimit track by torrent.hash"
              ng-class="{active: torrent.selected}"
              ng-click="setSelected($event, torrent, $index)"
              ng-right-click="showContextMenu($event, torrent, $index)"
              repeat-done="renderDone"
              data-hash="{{torrent.hash | lowercase }}"
              limit-source
              torrent-row
            ></tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="action footer status-bar">
      <div class="download-speed">
        <i class="ui blue arrow down icon"></i>
        {{ totalDownloadSpeed | speed }} <span ng-if="totalDownloaded">({{ totalDownloaded | bytes:2 }})</span>
      </div>
      <div class="upload-speed">
        <i class="ui orange arrow up icon"></i>
        {{ totalUploadSpeed | speed }} <span ng-if="totalUploaded">({{ totalUploaded | bytes:2 }})</span>
      </div>
    </div>
  </div>

  <context-menu id="contextmenu" bind="contextMenu" menu="$btclient.contextMenu" click="doContextAction" debug="debug">
  </context-menu>

  <add-torrent-modal
    torrents="pendingTorrentFiles"
    labels="labels"
    upload-torrent-action="uploadTorrent">
  </add-torrent-modal>
</div>
